<template>
  <div class="publish-articles-container">
    <el-row>
      <!-- 表格显示自己所有已发布的文章 -->
      <el-table
        :data="publishedArticles"
        stripe
        :default-sort="{ prop: 'date', order: 'ascending' }"
        style="width: 100%"
        max-height="700"
        size="mini"
        :header-row-style="{
          // 设置表头行样式
          height: '60px',
        }"
        :header-cell-style="{
          // 设置表头样式
          'background-color': '#f5f7fa',
          color: '#333',
          'font-weight': 'bold',
          'text-align': 'center',
          'font-size': '16px',
        }"
        :cell-style="{
          // 设置表格内容样式
          'text-align': 'center',
          'font-size': '14px',
        }"
        :border="true"
      >
        <el-table-column
          fixed
          prop="date"
          label="发布时间"
          sortable
          width="160"
        ></el-table-column>
        <!-- 数据项多设置宽度，横向滚动 -->
        <el-table-column prop="title" label="文章标题" width="400">
          <template slot-scope="scope">
            <!-- 已发布的直接链接,查看详细信息 -->
            <el-link
              v-if="scope.row.state === '2'"
              type="primary"
              style="font-size: 15px"
              @click="goBlogDetail(scope.row.knowledgeId)"
              >{{ scope.row.title }}</el-link
            >
            <span v-else>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.state === '0'"
              effect="dark"
              type="info"
              size="small"
            >
              草稿箱
            </el-tag>
            <el-tag
              v-if="scope.row.state === '1'"
              effect="dark"
              type="warning"
              size="small"
            >
              待审核
            </el-tag>
            <el-tag
              v-if="scope.row.state === '2'"
              effect="dark"
              type="success"
              size="small"
            >
              已发布
            </el-tag>
            <el-tag
              v-if="scope.row.state === '3'"
              effect="dark"
              type="danger"
              size="small"
            >
              被驳回
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="viewCounts" label="浏览量" width="100">
        </el-table-column>
        <el-table-column prop="likeCounts" label="点赞量" width="100">
        </el-table-column>
        <el-table-column prop="collectCounts" label="收藏量" width="100">
        </el-table-column>
        <el-table-column prop="commentCounts" label="评论量" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <!-- 待审核的不能编辑 -->
            <el-button
              size="small"
              type="primary"
              plain
              @click="handleEditBlog(scope.row.knowledgeId)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              plain
              @click="handleDeleteArticle(scope.row.knowledgeId, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin: 10px">
        <el-col :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalArticle"
            :page-size="pageSize"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :prev-text="`上一页`"
            :next-text="`下一页`"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { deleteKnowledge, getDifferentStateKnowledge } from "@/apis/apis";

@Component({
  name: "publishedArticles",
})
export default class publishedArticles extends Vue {
  scope: any;
  // 已发布的文章的管理
  publishedArticles: [
    {
      knowledgeId: number;
      date: string;
      title: string;
      state: string;
      viewCounts?: number;
      likeCounts?: number;
      collectCounts?: number;
      commentCounts?: number;
    }
  ] = [] as any;
  // 已发布的文章中显示的信息
  totalArticle: number = 0;
  pageSize: number = 10;
  pageIndex: number = 1;
  mounted() {
    this.getUserDifferentStateKnowledge(2, this.pageSize, this.pageIndex);
  }

  // 1.获取不同状态下的文章的数据信息,这里获取全部
  getUserDifferentStateKnowledge(
    state: number,
    pageSize: number,
    pageNum: number = 1
  ) {
    getDifferentStateKnowledge(state, pageSize, pageNum)
      .then((res) => {
        if (res.data.code === "200") {
          this.publishedArticles = res.data.data.total;
          let resData = res.data.data.records;
          // 每次请求的时候需要清空内容
          this.publishedArticles = [] as any;
          resData.forEach((item: any) => {
            this.publishedArticles.push({
              knowledgeId: item.knowledgeId,
              date: item.audit_time,
              title: item.title,
              state: item.status,
              viewCounts: item.viewCounts,
              likeCounts: item.likeCounts,
              collectCounts: item.collectCounts,
              commentCounts: item.commentCounts,
            });
          });
        } else {
          this.$message.error("获取文章草稿列表失败");
          console.log("获取文章草稿列表失败");
        }
      })
      .catch((error) => {
        this.$message.error("获取文章草稿列表失败");
        console.log(error);
      });
  }

  // 2.查看文章的详细信息
  goBlogDetail(knowledgeId: number) {
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: id,
      },
    });
    window.open(route.href, "_blank");
  }

  // 3.编辑文章打开写文章的页面
  handleEditBlog(knowledgeId: number) {
    // 创建路由对象
    // 需要将number类型的knowledgeId转换为string类型
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      path: "/writeBlog",
      query: {
        knowledgeId: id,
      },
    });
    // 打开新页面
    window.open(route.href, "_blank");
  }

  // 4. 删除当前的文章
  handleDeleteArticle(knowledgeId: number, index: number) {
    this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        deleteKnowledge(knowledgeId)
          .then((res) => {
            if (res.data.code === "200") {
              this.publishedArticles.splice(index, 1);
              this.$message.success("删除文章成功");
            } else {
              this.$message.error("删除文章失败");
            }
          })
          .catch((error) => {
            this.$message.error("删除文章失败");
            console.log("删除文章失败", error);
          });
      })
      .catch(() => {
        this.$message.info("已取消删除");
      });
  }

  // 文章分页切换请求
  handleSizeChange(val: number): void {
    this.pageSize = val;
    this.getUserDifferentStateKnowledge(2, val, this.pageIndex);
  }

  // 文章页面切换请求
  handleCurrentChange(val: number): void {
    this.pageIndex = val;
    this.getUserDifferentStateKnowledge(2, this.pageSize, val);
  }
}
</script>

<style lang="scss" scoped>
</style>